<template>
    <div class="count-flop" :key="compKey" :style="cssstr">
        <div :class="item != '.' ? 'count-flop-box' : 'count-flop-point'" v-for="(item, index) in defaultvalue"
            :key="'item1' + index">
            <div v-if="item != '.'" class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2, index2) in numberList" :key="'item2' + index2" class="count-flop-num">
                    {{ item2 }}
                </div>
            </div>
            <div v-else class="count-flop-content">.</div>
        </div>
        <div :class="item != '.' ? 'count-flop-box' : 'count-flop-point'" v-for="(item, index) in value"
            :key="'item3' + index">
            <div v-if="item != '.'" class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2, index2) in numberList" :key="'item4' + index2" class="count-flop-num">
                    {{ item2 }}
                </div>
            </div>
            <div v-else class="count-flop-content">.</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: [],
            defaultvalue: [],
            numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            compKey: 0,
        };
    },
    computed: {
        cssstr() {
            return "width:" + this.w + "px;height:" + this.h + "px;line-height:" + this.h + "px ;---numfontsize:" + (this.h * 0.65) + "px"
        }
    },
    props: ["val", 'w', 'h', 'len'],
    watch: {
        val(v) {
            if (v) {
                this.value = v.toString().split("");
                this.compKey += 1;
                this.defaultvalue = []
                if (this.len != null && this.len > this.value.length) {
                    for (let i = 0; i < this.len - this.value.length; i++) {
                        this.defaultvalue.push(0);
                    }
                }
            }
        },
    },
    created() {
        if (this.val) {
            this.value = this.val.toString().split("");
            this.defaultvalue = []
            if (this.len != null && this.len > this.value.length) {
                for (let i = 0; i < this.len - this.value.length; i++) {
                    this.defaultvalue.push(0);
                }
            }
        }
    },
};
</script>
<style scoped>
.count-flop {
    display: inline-block;
    /* 可更改 */

    /* font-size: 3rem; */
    color: #fff;
    font-weight: bold;
    display: flex;
}

.count-flop>div {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 100%;
}

.count-flop-box {
    /* 可更改 */
    margin-right: 0.05em;
    width: 100%;
    /* // border: 1px solid rgba(72, 152, 241, 0.3); */
    background: linear-gradient(180deg, #0b50a5 0%, #062853 100%);
    font-size: var(---numfontsize);
    border-radius: 2rpx;
}

.count-flop-point {
    /* 可更改 */
    margin-right: 0.05em;
    width: 50%;
    color: #0b50a5;
}

.count-flop-content {
    font-family: MicrosoftYaHei-Bold;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    animation-fill-mode: forwards !important;


}

.rolling_0 {
    animation: rolling_0 2.1s ease;
}

@keyframes rolling_0 {
    from {
        transform: translateY(-90%);
    }

    to {
        transform: translateY(0);
    }
}

.rolling_1 {
    animation: rolling_1 3s ease;
}

@keyframes rolling_1 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

.rolling_2 {
    animation: rolling_2 2.1s ease;
}

@keyframes rolling_2 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-20%);
    }
}

.rolling_3 {
    animation: rolling_3 3s ease;
}

@keyframes rolling_3 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-30%);
    }
}

.rolling_4 {
    animation: rolling_4 2.1s ease;
}

@keyframes rolling_4 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-40%);
    }
}

.rolling_5 {
    animation: rolling_5 3s ease;
}

@keyframes rolling_5 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

.rolling_6 {
    animation: rolling_6 2.1s ease;
}

@keyframes rolling_6 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-60%);
    }
}

.rolling_7 {
    animation: rolling_7 3.1s ease;
}

@keyframes rolling_7 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-70%);
    }
}

.rolling_8 {
    animation: rolling_8 2.1s ease;
}

@keyframes rolling_8 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-80%);
    }
}

.rolling_9 {
    animation: rolling_9 3.6s ease;
}

@keyframes rolling_9 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-90%);
    }
}
</style>
